<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1 }" v-if="orderInfo.pk_id ? true : false">
		<!--    状态-->
		<view class="state-box">{{ orderInfo.status === 3 ? '待收货' : '已发货' }}</view>
		<view class="content-box">
<!-- 			<view class="expre_info">
				<view class="expre_title">{{ orderInfo.express == 'ziti' ? '[客户自提]' : orderInfo.express_name }}</view>
				<view>{{ orderInfo.express_no }}</view>
				<view class="sww-tp copy" @click.stop="copyExpress">复制</view>
			</view> -->
			<!--      物流信息-->
			<view class="data-box" v-if="dataList">
				<view class="data-list" v-if="dataList.length > 0">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="data-item">
							<view class="data-time">
								<view class="">{{ item.time }}</view>
								<view class="">{{ item.timeA }}</view>
							</view>
							<view class="data-info">{{ item.context }}</view>
						</view>
					</block>
				</view>
				<view class="no-data" v-else>暂无物流信息</view>
			</view>
		</view>
	</view>
</template>
<script>
import { uniCopy } from '@/utils/uniPromise';
import { formatDate } from '@/utils/moment';

export default {
	data() {
		return {
			dataList: null,
			orderInfo: {},
			isOldOrder:false, // 是否从旧订单进来
		};
	},
	onLoad: function(options) {
		let { id, express_no, express } = options;
		if(options.type){
			this.isOldOrder = true
		}
		if (id && express && express_no) {
			this.initPage(id, express, express_no);
		}
	},
	methods: {
		//初始化页面数据
		initPage(id, express, express_no) {
			this.$loading();
			this.$nextTick(() => {
				this.getOrder(id);
				this.getLogistics(express, express_no);
			});
		},

		// 查订单信息
		getOrder(id) {
			this.$resPost('tripapiOrderList', { page: 1, type: 0 }).then(res => {
				this.orderInfo = res.data[0]
			});
		},

		// 查物流信息
		getLogistics(express, express_no) {
			this.$resPost('GetExpressSOld', { name: express, num: express_no }).then(res => {
				this.dataList = res.data.map(item => {
					item.timeA = formatDate(item.ftime, 'A', 'YYYY-MM-DD HH:mm:ss');
					item.time = formatDate(item.ftime, 'HH:mm', 'YYYY-MM-DD HH:mm:ss');
					return item;
				});
				this.$hide();
			}).catch(()=>{this.dataList = []})
		},
		// 复制快递公司
		copyExpress() {
			uniCopy(this.orderInfo.express_no).then(() => {
				this.$toast('已复制快递单号到粘贴板');
			});
		},
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.index-box {
	width: 100%;
	/* 状态 */
	.state-box {
		width: 100%;
		height: 140rpx;
		padding-bottom: 30rpx;
		background-color: var(--color);
		color: #ffffff;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.h-f5-10 {
		width: 100%;
		height: 10rpx;
		background-color: #f5f5f5;
	}
	/* 内容区 */
	.content-box {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		margin-top: -30rpx;
		overflow: hidden;
		.expre_info {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 30rpx 30rpx 30rpx 90rpx;
			.expre_title {
				margin-right: 20rpx;
			}
			.copy {
				padding-left: 40rpx;
				flex: 1;
				overflow: hidden;
			}
		}
		/* 物流信息 */
		.data-box {
			background-color: #fff;
			width: 100%;
			// margin-top: 10rpx;
			.no-data {
				width: 100%;
				text-align: center;
				line-height: 400rpx;
				font-size: 40rpx;
				color: #999999;
			}
			.data-list {
				width: 100%;
				padding: 48rpx 0;
				font-size: 28rpx;
				color: #999999;
				.data-item {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 50rpx;
					position: relative;
					&::after {
						content: '';
						width: 20rpx;
						height: 20rpx;
						background-color: #dddddd;
						border-radius: 50%;
						position: absolute;
						left: 170rpx;
						top: 50%;
						transform: translate(0, -50%);
					}
					&::before {
						content: '';
						border-right: 1rpx solid #dddddd;
						height: calc(100% + 50rpx);
						position: absolute;
						top: 0;
						left: 180rpx;
					}
					&:first-child {
						color: #333333;
						&::before {
							height: calc(50% + 50rpx) !important;
							bottom: -50rpx;
							top: auto;
						}
						&::after {
							background-color: var(--color);
						}
					}
					&:last-child {
						&::before {
							height: calc(50% + 50rpx) !important;
							top: -50rpx;
						}
					}
					.data-time {
						width: 180rpx;
						text-align: center;
					}
					.data-line {
						width: 20rpx;
						height: 20rpx;
						background-color: #dddddd;
						border-radius: 50%;
					}
					.data-info {
						flex: 1;
						padding: 0 40rpx;
					}
				}
			}
		}
	}
}
</style>
